<template>
  <div style="width: 100%;margin-top: 20px;">
    <div>
      <el-page-header @back="goBack" content="个人首页">
      </el-page-header>


    </div>

    <div style="width: 80%;margin-left: 20%;margin-top: 20px;">
      <el-form :model="user" label-width="80px">
        <!-- <el-col> -->
        <el-form-item label="头像">
          <!-- 头像修改 -->
          <el-upload action="http://lzyzone.top/uploadimage/image/upload/ly" list-type="text" :limit="1"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess"
            :on-exceed="handleExceed" :before-upload="beforeAvatarUpload">
            <img v-if="user.avater" :src="user.avater" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- </el-col> -->

        <el-form-item label="昵称:">
          <el-input type="text" v-model="user.nickname" />
        </el-form-item>
        <el-form-item label="个性签名">
          <el-input type="textarea" v-model="user.nickname" />
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio v-model="user.sex" :label="1">男</el-radio>
          <el-radio v-model="user.sex" :label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="生日：">
          <el-date-picker v-model="user.birthday" align="right" type="date" placeholder="选择日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="个性签名">
          <el-input type="text" v-model="user.nickname" />
        </el-form-item>
        <el-form-item>
          <el-button right size="mini">确认修改个人资料</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'EditInformation',
    data() {
      return {
        // 日期选择相关
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        formLabelWidth: '120px',
        user: {
          avater: '',
          nickname: '',
          sign: '',
          sex: 1,
          birthday: '',
          location: ''
        }
      }
    },
    methods: {
      goBack() {
        this.$parent.edit()
        this.$router.back()
      },
      /*文件上传前的钩子，对类型进行校验*/
      beforeAvatarUpload(file) {
        const isJPG = file.type.indexOf('image') >= 0 ? true : false;
        if (!isJPG) {
          this.$message.error('只能上传图片!');
        }
      },
      // 文件上传时的钩子
      handleAvatarSuccess(res, file) {
        console.log('res', res)
        this.addData.avater = res.data.filePath
      },
      // 文件移除时的钩子
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 点击已 上传文件时的钩子
      handlePictureCardPreview(file) {
        console.log('url', file.url)
        this.addData.avater = file.url;
        this.dialogVisible = true;
      },
      // 文件上传超出限制时的钩子
      handleExceed(files, fileList) {
        this.$message('只能上传一个头像哦!')
      },
    },
  }

</script>
<style>

</style>
